<template>
  <div id="ATable">
    <div class="ATable-btn">
      <el-row class="mb-4">
        <el-button type="primary" plain @click="messageadd">新增</el-button>
        <el-button type="primary" plain>导入</el-button>
        <el-button type="primary" plain>导出</el-button>
        <el-input v-model="messageSearch"  placeholder="输入关键词" clearable />
        <el-button type="primary" plain @click="load">查询</el-button>
      </el-row>
    </div>
    <div class="ATable-content">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="回复ID" width="150"/>
        <el-table-column prop="user.avatar" label="头像" width="150">
          <template  #default="scope">
            <div class="demo-image__preview" >
              <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.user.avatar"
                  :preview-src-list="[scope.row.user.avatar]"
                  :initial-index="1"
              >
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="user.username" label="用户名" width="150"/>
        <el-table-column prop="content" label="评论内容" width="150">
          <template #default="scope">
            <el-button type="primary" plain @click="getMessageContent(scope.row.content)" style="width: 130px" >查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="150"/>
        <el-table-column prop="commentId" label="评论Id" width="150"/>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button type="primary" plain @click="messageEdit(scope.$index,scope.row)">编辑</el-button>
            <el-button type="primary" plain @click="messageDelete(scope.$index,scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--      内容查询对话框-->
      <el-dialog
          v-model="dialogVisible2"
          title="内容"
          width="30%"
      >
        <span v-text="tmpMessageContent"></span>
        <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible2 = false" style="width:80px">确定</el-button>
      </span>
        </template>
      </el-dialog>

    </div>
    <div class="page">
      <div class="demo-pagination-block">
        <span class="demonstration"></span>
        <el-pagination
            v-model:currentPage="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
        </el-pagination>


        <el-dialog
            v-model="dialogVisible"
            title="提示"
            width="30%"
        >
          <el-form ref="formRef" :model="messageform" label-width="120px">
<!--            <el-form-item label="头像">-->
<!--              <el-upload action="http://localhost:8888/files/upload" :on-success="fileUploadSuccess">-->
<!--                <el-button type="primary"-->
<!--                           style="margin-left: 20px;width: 225px;background-color: white;color: grey;border-color: grey">-->
<!--                  Click to upload-->
<!--                </el-button>-->
<!--              </el-upload>-->
<!--&lt;!&ndash;              <el-input v-model="messageform.avatar"></el-input>&ndash;&gt;-->
<!--            </el-form-item>-->
            <el-form-item label="回复者Id">
              <el-input v-model="messageform.toUserId"></el-input>
            </el-form-item>
            <el-form-item label="评论Id">
              <el-input v-model="messageform.commentId"></el-input>
            </el-form-item>
<!--            <el-form-item label="邮箱">-->
<!--              <el-input v-model="messageform.email"></el-input>-->
<!--            </el-form-item>-->
            <el-form-item label="评论内容">
              <el-input v-model="messageform.content"></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
              <div class="demo-date-picker" style="margin-left: 20px">
                <div class="block">
                  <el-date-picker v-model="messageform.createTime" type="datetime"
                                  format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择日期">
                  </el-date-picker>
                </div>
              </div>
            </el-form-item>
          </el-form>
          <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="messagesave"
                >确定</el-button
                >
              </span>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../../utils/request";

export default {
  name: 'Comment',

  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: '',
      pageSize: 10,
      messageSearch: '',
      dialogVisible: false,
      messageform: {},
      dialogVisible2:'',
      tmpMessageContent:''
    }
  },

  created() {
    this.load(),
        this.dialogVisible2 = false
  },

  methods: {
    getMessageContent(content){
      this.tmpMessageContent = content
      this.dialogVisible2 = true
    },
    fileUploadSuccess(res) {
      this.messageform.avatar = res.data
    },
    load() {
      request.get("/message", {
        params:{
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.messageSearch
        }

      }).then(res => {
        this.tableData = res.data.records,
            this.total = res.data.total
      })
    },
    messageEdit(index,row){
      this.messageform = JSON.parse(JSON.stringify(row))
      console.log(this.messageform)
      this.dialogVisible = true
    },
    messageDelete(index,id){
      request.delete("/message/delete",{
        params:{
          id
        }
      }).then(res =>{
        this.load()
      })

    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      this.load()
    },
    messageadd() {
      this.dialogVisible = true
      this.messageform = {}
    },
    messagesave() {
      if (this.messageform.id) {  // 更新
        request.put("/message/update", this.messageform).then(res => {
          console.log(res)
          this.load() // 刷新表格的数据
          this.dialogVisible = false  // 关闭弹窗
        })
      } else {  // 新增
        request.post("/message/save", this.messageform).then(res => {
          console.log(res)
          this.load() // 刷新表格的数据
          this.dialogVisible = false  // 关闭弹窗
        })
      }
    }
  }

}
</script>

<style lang="less" scoped>
@import "../../style/admin/table.less";
</style>
